<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const formRef = ref()

const baseFormData = ref({
  reservationPerson: '',
  reservationDate: '',
  reservedNumber: '1',
  serviceId: '',
})
const rules = {
  reservationPerson: {
    rules: [{ required: true, errorMessage: '请输入姓名' }],
  },
  reservationPhone: {
    rules: [{ required: true, errorMessage: '请输入手机号' }, {
      minLength: 3,
      maxLength: 5,
      errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
    }],

  },
}

onLoad((options) => {
})

async function submit() {
  formRef.value
    .validate()
    .then(() => {
      // 校验通过后事件
      console.log('submit', baseFormData.value)
    })
}
</script>

<template>
  <view class="page">
    <uni-nav-bar
      dark :fixed="true" background-color="#ffffff" status-bar title="创建订单" color="##393D40"
      left-icon="left" @clickLeft="() => {
        uni.navigateBack({
          delta: 1,
        })
      }"
    />

    <scroll-view scroll-y class="content  ">
      <view class=" bg-white px-[20rpx] py-[32rpx] text-[28rpx]">
        <view class=" mb-[42rpx] font-medium text-[#393D40]">
          基础信息
        </view>

        <view class="h flex items-center justify-between   border-b  border-[#EEEEEE] bg-gray-50">
          <view class=" mr-[80rpx] shrink-0 text-[##393D40]">
            客户名称
          </view>
          <view class=" flex   overflow-hidden text-[28rpx] text-[#919BA1]">
            <view>请选择下游客户名称</view>
            <img class="size-[40rpx]" src="../../../static/right.png">
          </view>
        </view>

        <view class="h flex items-center  justify-between border-b border-[#EEEEEE]">
          <view class=" mr-[80rpx] shrink-0 text-[##393D40]">
            所在地
          </view>
          <view class=" flex   overflow-hidden text-[28rpx] text-[#919BA1]">
            <view>请选择所在地</view>
          </view>
        </view>

        <view class="h flex items-center  justify-between border-b border-[#EEEEEE]">
          <view class=" mr-[80rpx] shrink-0 text-[##393D40]">
            验收方式
          </view>
          <view class=" flex   overflow-hidden text-[28rpx] text-[#919BA1]">
            <view>甲方自提</view>
          </view>
        </view>

        <view class="h flex items-center  justify-between border-b border-[#EEEEEE]">
          <view class=" mr-[80rpx] shrink-0 text-[##393D40]">
            交车地点
          </view>
          <view class=" flex   overflow-hidden text-[28rpx] text-[#919BA1]">
            <view>4S店</view>
          </view>
        </view>

        <view class="h flex items-center  justify-between border-b border-[#EEEEEE]">
          <view class=" mr-[80rpx] shrink-0 text-[##393D40]">
            资源专员
          </view>
          <view class=" flex   overflow-hidden text-[28rpx] text-[#919BA1]">
            <view>请选择下游客户名称</view>
            <img class="size-[40rpx]" src="../../../static/right.png">
          </view>
        </view>
      </view>

      <view class="">
        <uni-forms
          ref="formRef" label-position="top" :modelValue="baseFormData" :rules="rules"
          validateTrigger="blur"
        >
          <uni-forms-item label="姓名" required name="reservationPerson">
            <uni-easyinput v-model="baseFormData.reservationPerson" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="手机" required name="reservationPhone">
            <uni-easyinput v-model="baseFormData.reservationPhone" placeholder="请输入联系方式" />
          </uni-forms-item>
        </uni-forms>

        <button @click="submit">
          Submit
        </button>
      </view>
    </scroll-view>

    <view class=" fixed bottom-0 left-0 z-10 w-full bg-white px-[20rpx] py-[40rpx] ">
      <view class="flex h-[100rpx] flex-col justify-center  rounded-[16rpx] bg-[#0273BF]  text-[34rpx]">
        <view class="text-center align-middle text-[#ffffff]">
          编辑订单
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  position: relative;
  /* 关键 */
  min-height: 100vh;
}

.uni-icons {
  font-size: 24rpx !important;
}

.content {
  /* 底部留白，避免被按钮覆盖 */
  height: calc(100vh - 100rpx - 24rpx - 200rpx);
}

.h {
  height: 88rpx;
}
</style>
